<template>
  <div class="page">
    <div class="warnLine">
      <el-text class="mx-1" type="primary"
        >输入关键字+access token，立即查询
        GitCode用户或仓库(搜索接口需授权)。</el-text
      >
    </div>

    <div class="form">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="授权码">
          <el-input v-model="form.code" type="password" />
        </el-form-item>
        <el-form-item label="搜索">
          <el-select v-model="form.type" placeholder="选择搜索内容">
            <el-option label="用户" value="users" />
            <el-option label="仓库" value="repositories" />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="form.keyword" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="resultBox">
      <img
        src="https://cdn-img.gitcode.com/ba/da/5b7a7d5ab1e41b0284e4ec850f38960292ed8c1b993961a3a6624a64995b8d3e.jpg"
        alt="测试"
      />
      <div class="resultItem" v-for="(item, index) in list" :key="index">
        <div class="avatar imgCover">
          <img :src="item.avatar_url" :alt="item.name" />
        </div>
        <div>
          <!-- <div>{{ item.name }}({{ item.login }})</div>
          <div>{{ item.bio }}</div>
          <div>{{ dayjs(item.created_at).format("YYYY-MM-DD") }}</div>
          <div>{{ item.html_url }}</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import { reactive } from "vue";
import { searchUsers, searchRepos } from "~/apis/search";
const form = reactive({
  code: "",
  keyword: "坚果",
  type: "users",
});
const list = ref<any[]>([]);
const onSubmit = async () => {
  console.log("submit!");
  const accessToken = form.code;
  if (!accessToken) {
    return ElMessage({
      message: "请填写授权码",
      type: "warning",
    });
  }
  if (!form.keyword) {
    return ElMessage({
      message: "请填写关键字",
      type: "warning",
    });
  }

  if (form.type === "users") {
    const res: any = await searchUsers({
      access_token: accessToken,
      q: form.keyword,
    });
    console.log(res);
    list.value = res;
  }
  if (form.type === "repositories") {
    const res: any = await searchRepos({
      access_token: accessToken,
      q: form.keyword,
    });
    console.log(res);
    list.value = res;
  }
};
</script>

<style lang="scss" scoped>
.page {
  .warnLine {
    margin: 30px;
  }
  .form {
    margin: 30px;
    background: #f5f5f5;
    border-radius: 10px;
    padding: 30px;
  }

  .resultBox {
    margin: 30px;
    .resultItem {
      margin-bottom: 30px;
      background-color: #f5f5f5;
      border-radius: 10px;
      font-size: 14px;
      .avatar {
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>
